<template>
	<view class="flex flex-column u-m-t-20">
		<text class="u-font-26 font-weight-bold">{{item.group_name}}</text>
		<view class="flex flex-wrap u-m-t-10">
			<block v-for="(v, index) in item.spec_items" :key="index">
				<view class="u-m-r-20 u-m-t-20 u-p-x-30 rounded-25" :class="[checkedID == v.item_id?'active':'bgc']" @click="change(v.item_id)">
					<text class="u-font-24" :class="[checkedID == v.item_id?'text-white':'text-dark']" style="height: 46rpx;line-height: 46rpx;">{{v.spec_value}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goods-detail-sku-item',
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			index: {
				type: [String, Number],
				default() {
					return 0
				}
			}
		},
		created(){
			uni.$on('clearCheckedId', ()=>{
				this.checkedID = ''
			})
		},
		watch:{
			item:{
				handler(){
					console.log('this.item',this.item);
				},deep:true
			}
		},
		data() {
			return {
				checkedID: '',
			}
		},
		methods: {
			change(id) {
				this.checkedID = id
				this.$emit('checkedID', {index: this.index, item_id: id })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #fff;
		background-color: $u-main-bg-color;
	}
	.bgc {
		background-color: #f4f4f4;
	}
</style>
